<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>试题预览</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/font/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="<%=path%>/static/css/font/font-awesome-ie7.min.css"><![endif]-->
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/core.css">
    <link rel="stylesheet" href="<%=path%>/static/css/examMng/examMng.css"/>
    <!--bootstrap基础引用 start-->
    <script type="text/javascript" src="<%=path%>/static/jstreeview/bootstrap/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/bootstrap.min.js"></script>
    <!--bootstrap基础引用 end-->
    <!--bootstrap-dialog start-->
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">
    <script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
    <!--bootstrap-dialog end-->
    <style type="text/css">
        .ico {
            float: right;
            margin-right: 20px;
            font-size: 16px;
        }

        .btnbox {
            width: 440px;
            margin: 30px auto;
            font-size: 16px;
        }

        .btnbox a {
            width: 200px;
            height: 46px;
            line-height: 34px;
            margin: 0px 8px;
        }

        #pageBox {
            padding: 10px 0 0 0;
            width: 1088px;
            margin: 0 auto;
            text-align: center;
        }

        #pageBox span {
            display: inline-block;
            width: 60px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #fff;
            background: #4c4ca6;

        }

        #pageNav {
            display: inline-block;
        }

        #pageNav a {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #4c4ca6;
            text-decoration: none;
        }

        #pageNav a.active, #pageNav a:hover {
            background: #4c4ca6;
            color: #EFEFEF;
        }

        #prev:hover {
            cursor: pointer;
        }

        #next:hover {
            cursor: pointer;
        }
    </style>
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/jquery-1.9.1.min.js"></script>
    <script src="<%=path%>/static/js/jquery.z-pager.js" type="text/javascript" charset="utf-8"></script>
    <script src="<%=path%>/static/js/examMng/right-btn.js"></script>
</head>
<body>
<jsp:include page="../head.jsp" flush="true"/>
<!--body begin-->
<div class="main-container">
    <div class="container info-add body-box">
        <div class="info-add-box">
            <p>${content.title}-选择试题</p>
            <a href="javascript:history.go(-1);"><i
                    class="glyphicon glyphicon-arrow-left"></i>&nbsp;返回</a>
        </div>
        <div class="view-container">
            <div class="container-title">
                <span class="font-weight">${qutype.name }</span>
                <div class="searchbox" style="margin-top: 0px;">
                    <input type="text" class="form-control search" style="height: 25px;" placeholder="请输入检索条件">
                    <i class="glyphicon glyphicon-search" style="top: 3px; font-size: 18px;"></i>
                </div>
            </div>

            <div class="view-content" id="pageMain">
                <div id="show">
                <c:forEach items="${resultList}" var="result" varStatus="status">
                    <div class="view-box">
                        <div class="view-title">
                            <label class="input-check">
                                <input id="question${result.id}" name="selectQuestions" type="checkbox"  value="${result.id}">
                            </label>
                            <div class="word">
                                ${status.count}. <span>${result.title}</span>
                            </div>
                        </div>
                        <div class="view-choose-box">
                            <div class="radio">
                                <label class="choose">
                                    <input type="radio" name="optionsRadios1" id="optionsRadios2" value="option2"
                                           disabled>
                                    <c:choose>
                                        <c:when test="${not empty result.apic && !(result.apic eq null) }">
                                            <p>A. ${result.a }</p>
                                            <img style="width: 120px; height: 120px;"
                                                 src="<%=basePath %>${result.apic }">
                                        </c:when>
                                        <c:otherwise>
                                            <p>A. ${result.a }</p>
                                        </c:otherwise>
                                    </c:choose>
                                </label>
                            </div>
                            <div class="radio">
                                <label class="choose">
                                    <input type="radio" name="optionsRadios1" id="optionsRadios2" value="option2"
                                           disabled>
                                    <c:choose>
                                        <c:when test="${not empty result.bpic && !(result.bpic eq null) }">
                                            <p>B. ${result.c }</p>
                                            <img style="width: 120px; height: 120px;"
                                                 src="<%=basePath %>${result.bpic }">
                                        </c:when>
                                        <c:otherwise>
                                            <p>B. ${result.b }</p>
                                        </c:otherwise>
                                    </c:choose>
                                </label>
                            </div>
                            <div class="radio">
                                <label class="choose">
                                    <input type="radio" name="optionsRadios1" id="optionsRadios2" value="option2"
                                           disabled>
                                    <c:choose>
                                        <c:when test="${not empty result.cpic && !(result.cpic eq null) }">
                                            <p>A. ${result.c }</p>
                                            <img style="width: 120px; height: 120px;"
                                                 src="<%=basePath %>${result.cpic }">
                                        </c:when>
                                        <c:otherwise>
                                            <p>C. ${result.c }</p>
                                        </c:otherwise>
                                    </c:choose>
                                </label>
                            </div>
                            <div class="radio">
                                <label class="choose">
                                    <input type="radio" name="optionsRadios1" id="optionsRadios2" value="option2"
                                           disabled>
                                    <c:choose>
                                        <c:when test="${not empty result.dpic && !(result.dpic eq null) }">
                                            <p>D. ${result.d }</p>
                                            <img style="width: 120px; height: 120px;"
                                                 src="<%=basePath %>${result.dpic }">
                                        </c:when>
                                        <c:otherwise>
                                            <p>D. ${result.d }</p>
                                        </c:otherwise>
                                    </c:choose>
                                </label>
                            </div>
                            <div class="answer-box">
                                <span class="right-line"></span> <span>正确答案：<b>${result.answer }</b></span>
                            </div>
                        </div>
                    </div>
                </c:forEach>
                </div>
            </div>
            <div id="pageBox">
                <span id="prev">上一页</span>
                <ul id="pageNav" ></ul>
                <span id="next">下一页</span>
            </div>
            <!--试卷配置信息 end-->
            <div class="btnbox">
                <a class="btn btn-danger" onclick="precious('/examsys/paper/addOrEdit','${paper.id}')">
                    <i class="glyphicon glyphicon-cancel" style="margin-left:0;"></i>返回</a>
                <a class="btn btn-info click_loading" onclick="updatePaperQuestions()">确定
                    <i class="glyphicon glyphicon-ok" style="margin-right:0;"></i></a>
            </div>
        </div>
    </div>
</div>


<!--body end-->
<script type="text/javascript">
    $(document).ready(function () {

        // 试卷管理
        if (${role eq 'master'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
            $('#topMain').children().eq(4).addClass('active'); // 追加样式;
        }

        $(".ico").click(function (event) {
            event.stopPropagation();
            if ($(".bjbtn").css("display") == "none") {
                $(".bjbtn").css("display", "block");
            } else {
                $(".bjbtn").css("display", "none");
            }
        });
        var arrList = new Array();
        arrList = "${questionId}".replace('[','').replace(']',"").replace(/\s*/g,"").split(',');
        console.info(arrList);
        for (var i = 0; i < arrList.length; i++) {
            $("input[id=question"+arrList[i]+"]").attr("checked", true);
        }
        tabPage({
            pageMain: '#pageMain',
            pageNav: '#pageNav',
            pagePrev: '#prev',
            pageNext: '#next',
            curNum: 5, /*每页显示的条数*/
            activeClass: 'active', /*高亮显示的class*/
            ini: 0,/*初始化显示的页面*/
        });
        //分页模块
        tabPage(tabPage);
    });

    function updatePaperQuestions() {
        var checkedArr = "";
        $("input[name='selectQuestions']:checked").each(function () {
            checkedArr = checkedArr + $(this).val() + ",";
        });

        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = '<%=basePath%>paper/updatePaperQuestions';
        var myInputids = document.createElement("input");
        myInputids.setAttribute("name", "ids");  // 为input对象设置name
        myInputids.setAttribute("value", checkedArr);  // 为input对象设置value
        var paperid = document.createElement("input");
        paperid.setAttribute("name", "paperid");  // 为input对象设置name
        paperid.setAttribute("value", '${paperid}');  // 为input对象设置value
        var qutypeid = document.createElement("input");
        qutypeid.setAttribute("name", "qutypeid");  // 为input对象设置name
        qutypeid.setAttribute("value", '${typeId}');  // 为input对象设置value
        myForm.appendChild(myInputids);
        myForm.appendChild(paperid);
        myForm.appendChild(qutypeid);
        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);  // 提交后移除创建的form
    }
    function tabPage(tabPage) {

        var typeId = '${typeId}';
        var ConId = '${contentid}';
        var pageMain = $(tabPage.pageMain);
        /*获取内容列表*/
        var pageNav = $(tabPage.pageNav);
        /*获取分页*/
        var pagePrev = $(tabPage.pagePrev);
        /*上一页*/
        var pageNext = $(tabPage.pageNext);
        /*下一页*/
        var curNum = tabPage.curNum;
        /*每页显示数*/
        var len = 5;
        /*计算总页数*/
        var pageList = '';
        /*生成页码*/
        var iNum = 0;
        /*当前的索引值*/

        for (var i = 0; i < len; i++) {
            pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
        }
        pageNav.html(pageList);
        /*头一页加高亮显示*/
        pageNav.find("a:first").addClass(tabPage.activeClass);

        /*******标签页的点击事件*******/
        pageNav.find("a").each(function () {

            $(this).click(function () {
                pageNav.find("a").removeClass(tabPage.activeClass);
                $(this).addClass(tabPage.activeClass);
                iNum = $(this).index();
                var paperid = "${paperid}";
                var checkedArr = "";
                $("input[name='selectQuestions']:checked").each(function () {
                    checkedArr = checkedArr + $(this).val() + ",";
                });
                $.ajax({
                    type: "POST",
                    url: "<%=basePath%>paper/toCheckQuestionAjax",
                    data: {"page_num": iNum + 1, "page_size": curNum,
                        "typeId": typeId, "ConId": ConId,"paperid":paperid,
                        "ids":checkedArr
                    },
                    success: function (data) {
                        if (data.status == 1) {
                            var questionStr = "";
                            for (var i = 0; i < data.resultList.length; i++) {

                                var temp = "";
                                var singleQuesStr0 = '			<div class="view-box" > ' +
                                    '							<div class="view-title">' +
                                    '								<label class="input-check"> ';
                                console.info(data.resultList[i]);
                                if (data.sels.indexOf(data.resultList[i].id) != -1) {
                                    temp = '<input name="selectQuestions" type="checkbox" checked value="' + data.resultList[i].id + '">';
                                }else {
                                    temp = '<input name="selectQuestions" type="checkbox" value="' + data.resultList[i].id + '">';
                                }
                                singleQuesStr0 = singleQuesStr0+ temp +
                                    '								</label>' +
                                    '								<div class="word">' +
                                    '									<span>' + data.resultList[i].title + '</span>' +
                                    '								</div> ' +
                                    '							</div> ' +
                                    '							<div class="view-choose-box">';
                                var optionA = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios1"   disabled> ' +
                                    '													<p>' + data.resultList[i].a + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionB = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios2"   disabled> ' +
                                    '													<p>' + data.resultList[i].b + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionC = "";
                                var optionD = "";
                                if(data.resultList[i].c!=""&&data.resultList[i].c!=null){
                                    optionC = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios3"   disabled> ' +
                                        '													<p>' + data.resultList[i].c + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                if(data.resultList[i].d!=""&&data.resultList[i].d!=null){
                                    optionD = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios4"   disabled> ' +
                                        '													<p>' + data.resultList[i].d + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                var singleQuesStr1 = '							</div>' +
                                    ' <div class="answer-box">'+
                                    '                                <span class="right-line"></span> <span>正确答案：<b>'+data.resultList[i].answer+'</b></span>'+
                                    '                            </div>'+
                                    '							' +
                                    '						</div>';

                                questionStr = questionStr + singleQuesStr0 + optionA + optionB+optionC+optionD+singleQuesStr1;
                            }
                            $("#show").html(questionStr);
                        }
                    }
                })
            });
        })

        $(pageMain).find("li").hide();
        /************首页的显示*********/
        for (var i = 0; i < curNum; i++) {
            $(pageMain).find("li").eq(i).show()
        }

        /*下一页*/
        pageNext.click(function () {
            $(pageMain).find("li").hide();
            if (iNum == len - 1) {
                BootstrapDialog.confirm({
                    title : '提示',
                    message : '已经是最后一页',
                    size : BootstrapDialog.SIZE_SMALL,
                    type : BootstrapDialog.TYPE_DEFAULT,
                    closable : true,
                    btnCancelLabel : '取消',
                    btnOKLabel : '确定'
                });
                for (var i = (len - 1) * curNum; i < len * curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
                return false;
            } else {
                pageNav.find("a").removeClass(tabPage.activeClass);
                iNum++;
                pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                var paperid = "${paperid}";
                var checkedArr = "";
                $("input[name='selectQuestions']:checked").each(function () {
                    checkedArr = checkedArr + $(this).val() + ",";
                });
                $.ajax({
                    type: "POST",
                    url: "<%=basePath%>paper/toCheckQuestionAjax",
                    data: {"page_num": iNum + 1, "page_size": curNum, "typeId": typeId, "ConId": ConId,
                    "paperid":paperid,
                    "ids":checkedArr
                    },
                    success: function (data) {
                        if (data.status == 1) {
                            var questionStr = "";
                            for (var i = 0; i < data.resultList.length; i++) {

                                var temp = "";
                                var singleQuesStr0 = '			<div class="view-box" > ' +
                                    '							<div class="view-title">' +
                                    '								<label class="input-check"> ';
                                console.info(data.resultList[i]);
                                    if (data.sels.indexOf(data.resultList[i].id) != -1) {
                                        temp = '<input name="selectQuestions" type="checkbox" checked value="' + data.resultList[i].id + '">';
                                    }else {
                                        temp = '<input name="selectQuestions" type="checkbox" value="' + data.resultList[i].id + '">';
                                    }
                                singleQuesStr0 = singleQuesStr0+ temp +
                                    '								</label>' +
                                    '								<div class="word">' +
                                    '									<span>' + data.resultList[i].title + '</span>' +
                                    '								</div> ' +
                                    '							</div> ' +
                                    '							<div class="view-choose-box">';
                                var optionA = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios1"   disabled> ' +
                                    '													<p>' + data.resultList[i].a + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionB = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios2"   disabled> ' +
                                    '													<p>' + data.resultList[i].b + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionC = "";
                                var optionD = "";
                                if(data.resultList[i].c!=""&&data.resultList[i].c!=null){
                                    optionC = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios3"   disabled> ' +
                                        '													<p>' + data.resultList[i].c + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                if(data.resultList[i].d!=""&&data.resultList[i].d!=null){
                                    optionD = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios4"   disabled> ' +
                                        '													<p>' + data.resultList[i].d + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                var singleQuesStr1 = '							</div>' +
                                    ' <div class="answer-box">'+
                                    '                                <span class="right-line"></span> <span>正确答案：<b>'+data.resultList[i].answer+'</b></span>'+
                                    '                            </div>'+
                                    '							' +
                                    '						</div>';

                                questionStr = questionStr + singleQuesStr0 + optionA + optionB+optionC+optionD+singleQuesStr1;
                            }
                            $("#show").html(questionStr);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                      console.info("shibai");
                    }
                })
            }
            for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                $(pageMain).find("li").eq(i).show()
            }
        });
        /*上一页*/
        pagePrev.click(function () {
            $(pageMain).find("li").hide();
            if (iNum == 0) {
                BootstrapDialog.confirm({
                    title : '提示',
                    message : '当前是第一页',
                    size : BootstrapDialog.SIZE_SMALL,
                    type : BootstrapDialog.TYPE_DEFAULT,
                    closable : true,
                    btnCancelLabel : '取消',
                    btnOKLabel : '确定'
                });
                for (var i = 0; i < curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
                return false;
            } else {
                pageNav.find("a").removeClass(tabPage.activeClass);
                iNum--;
                pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                var paperid = "${paperid}";
                var checkedArr = "";
                $("input[name='selectQuestions']:checked").each(function () {
                    checkedArr = checkedArr + $(this).val() + ",";
                });
                $.ajax({
                    type: "POST",
                    url: "<%=basePath%>paper/toCheckQuestionAjax",
                    data: {"page_num": iNum + 1, "page_size": curNum, "typeId": typeId, "ConId": ConId,
                        "paperid":paperid,
                        "ids":checkedArr
                    },
                    success: function (data) {
                        if (data.status == 1) {
                            var questionStr = "";
                            for (var i = 0; i < data.resultList.length; i++) {

                                var temp = "";
                                var singleQuesStr0 = '			<div class="view-box" > ' +
                                    '							<div class="view-title">' +
                                    '								<label class="input-check"> ';
                                console.info(data.resultList[i]);
                                if (data.sels.indexOf(data.resultList[i].id) != -1) {
                                    temp = '<input name="selectQuestions" type="checkbox" checked value="' + data.resultList[i].id + '">';
                                }else {
                                    temp = '<input name="selectQuestions" type="checkbox" value="' + data.resultList[i].id + '">';
                                }
                                singleQuesStr0 = singleQuesStr0+ temp +
                                    '								</label>' +
                                    '								<div class="word">' +
                                    '									<span>' + data.resultList[i].title + '</span>' +
                                    '								</div> ' +
                                    '							</div> ' +
                                    '							<div class="view-choose-box">';
                                var optionA = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios1"   disabled> ' +
                                    '													<p>' + data.resultList[i].a + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionB = '									<div class="radio">' +
                                    '										<label class="choose"> ' +
                                    '											<input type="radio" name="optionsRadios2"   disabled> ' +
                                    '													<p>' + data.resultList[i].b + '</p>' +
                                    '										</label>' +
                                    '									</div>';
                                var optionC = "";
                                var optionD = "";
                                if(data.resultList[i].c!=""&&data.resultList[i].c!=null){
                                    optionC = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios3"   disabled> ' +
                                        '													<p>' + data.resultList[i].c + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                if(data.resultList[i].d!=""&&data.resultList[i].d!=null){
                                    optionD = '									<div class="radio">' +
                                        '										<label class="choose"> ' +
                                        '											<input type="radio" name="optionsRadios4"   disabled> ' +
                                        '													<p>' + data.resultList[i].d + '</p>' +
                                        '										</label>' +
                                        '									</div>';
                                }
                                var singleQuesStr1 = '							</div>' +
                                    ' <div class="answer-box">'+
                                    '                                <span class="right-line"></span> <span>正确答案：<b>'+data.resultList[i].answer+'</b></span>'+
                                    '                            </div>'+
                                    '							' +
                                    '						</div>';

                                questionStr = questionStr + singleQuesStr0 + optionA + optionB+optionC+optionD+singleQuesStr1;
                            }
                            $("#show").html(questionStr);
                        }
                    }
                })
            }
            for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                $(pageMain).find("li").eq(i).show()
            }
        })
    }

    $('input[name="selectQuestions"]').click(function(){
        var ques_id = $(this).val();
        if ($(this).is(':checked')) {
            $.ajax({
                url: '<%=basePath%>paper/updatePaperQuestionsAjax',
                data: {
                    paperid: '${paperid}',
                    type: "add",
                    questionid: ques_id
                },
                dataType: "json",
                success: function (data, status) {

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        } else {
            $.ajax({
                url: '<%=basePath%>paper/updatePaperQuestionsAjax',
                data: {
                    paperid: '${paperid}',
                    type: "del",
                    questionid: ques_id
                },
                dataType: "json",
                success: function (data, status) {

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        }

    })

</script>
</body>
</html>

